import React, { Component } from 'react'
import ViewShot, { captureRef } from 'react-native-view-shot'
import { View, StyleSheet, Text, Image, Button } from 'react-native'

class ComponentA extends Component {
  render () {
    return (
      <View style={{ height: 200, backgroundColor: 'red' }}></View>
    )
  }

  componentDidMount () {
    console.info('ComponentA', 'componentDidMount')
  }

  componentWillUnmount () {
    console.info('ComponentA', 'componentWillUnmount')
  }
}

export class TestViewComponent extends Component {
  constructor (props) {
    super(props)
    this.state = {
      showComponent: false
    }
  }

  render () {
    const { showComponent } = this.state
    return (
      <View style={styles.container}>
        {showComponent && <ComponentA ref={this.componentARef}/>}
        <Button title={'显示或隐藏'} onPress={this.showHide}/>
      </View>
    )
  }

  componentARef = (ref) => {
    this.crf = ref
    console.info('componentARef')
  }

  componentDidMount () {

  }

  showHide = () => {
    this.setState({
      showComponent: !this.state.showComponent
    },() => {
      console.info('componentARef','showHide')
      console.info(this.crf)
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue'
  },
  viewShot: {
    backgroundColor: 'red'
  },
  imageView: {
    width: 300,
    height: 500,
    backgroundColor: 'white'
  },
  image: {
    width: 300,
    height: 500,
    resizeMode: 'contain'
  }
})
